<!DOCTYPE HTML>
<html>

	<head lang="zh-CN">
		<meta charset="UTF-8">
		<title>绑定手机号注册</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- 设置初始缩放比例为1.0，使用设备宽度  -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 在iOS下开启全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 隐藏 Sarafi 状态栏  -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../css/wapReset.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/personal.css">
		<script src="../../js/jquery.rem.min.js"></script>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/personalJs/mui.enterfocus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/personalJs/app.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body id="bindBody">
		<header class="mui-bar mui-bar-nav message_head">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">绑定手机号</h1>
		</header>
		<div class="bindCont">
			<input type="tel" maxlength="11" placeholder="请输入您的手机号" check="false" />
			<div class="picKey" style="display: none;">
				<input type="text" placeholder="请输入图形验证码" check="false" maxlength="4" />
				<span></span>
			</div>
			<div class="picKey" style="display: none;">
				<input type="text" placeholder="请输入短信验证码" id="mesKey" />
				<button check="true">获取验证码</button>
			</div>
			<!--<h6>注册/登录即表示同意<i>《享阅汇服务协议》</i></h6>-->
			<button id="regPush">绑 定</button>
		</div>
		<div id="account"></div>
	</body>
	<script type="text/javascript">
		mui.plusReady(function(){
			mui.init();
			$(".bindCont>input").eq(0).val("");
			$(".picKey").eq(0).find("input").val("")
			$(".bindCont>input").eq(0).on("input propertychange change", function(event) {
				if($(".bindCont>input").eq(0).val().length == 11) {
					//验证手机号
					if($(".bindCont>input").eq(0).attr("check") == "false") {
						$(".bindCont>input").eq(0).attr("check", "true")
						var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
						var flag = reg.test($(".bindCont input").eq(0).val()); //true
						console.log(flag)
						if(flag) {
							getImgKey();
						} else {
							alert("手机号格式有误，请重新输入")
						}
					}
				} else {
					$(".bindCont>input").eq(0).attr("check", "false")
				}
			});
	
			$(".picKey").eq(0).find("span").on("click", function() {
				getImgKey()
			})
	
			//调取图片验证码
			function getImgKey() {
				mui.ajax("http://120.76.201.26:8088/msg/img", {
					dataType: "json",
					data: {
						uuid: localStorage.uuid
					},
					type: "POST",
					success: function(e) {
						$(".picKey").eq(0).css("display", "block")
						$(".picKey").eq(0).find("span").text(e.data.img_code)
						$(".picKey").eq(0).find("input").on("input propertychange change", function(event) {
							//验证图片验证码是否正确
							if($(this).val().length == 4) {
								$(".picKey").eq(1).css("display", "block");
								$(".picKey").eq(1).find("button").on("click", function() {
									var num = 60;
									if($(this).attr("check") == "true") {
										$(".picKey").eq(1).find("button").attr("check", "false")
										var timer = null;
										postMessage()
										clearInterval(timer)
										timer = setInterval(function() {
											num--;
											if(num <= 0) {
												clearInterval(timer)
												$(".picKey").eq(1).find("button").html("重新发送").attr("check", "true")
											} else {
												$(".picKey").eq(1).find("button").html("已发送" + num + "s")
											}
										}, 1000)
									}
								})
							}
						});
					}
				})
			}
	
			function postMessage() {
				$.ajax({
					type: "get",
					url: "http://120.76.201.26:8088/msg/msg?mobile=" + $(".bindCont>input").eq(0).val() + "&scene=1&app=3&uuid=" + "4c6a0093-2eb8-3eaf-bdee-c0be0b15654f",
					async: true,
					success: function(e) {
						console.log(e)
					}
				});
			}
			$("#regPush").on("click", function() {
				console.log(546)
				console.log(localStorage.openid)
				console.log($(".bindCont>input").eq(0).val())
				console.log($(".picKey").eq(0).find("input").val())
				console.log($(".picKey").eq(1).find("input").val())
				if(!$(".bindCont>input").eq(0).val() && !$(".picKey").eq(0).find("input").val() && !$(".picKey").eq(1).find("input").val()) {
					alert("不能为空")
				} else {
					//调取绑定接口
					$.ajax({
						type:"post",
						url:"http://120.76.201.26:8088/login/wx_bind_phone",
						async:true,
						data:{
							mobile:$(".bindCont>input").eq(0).val(),
							wx_id:localStorage.openid,
							imgCode:$(".picKey").eq(0).find("input").val(),
							code:$(".picKey").eq(1).find("input").val()
						},
						beforeSend: function(request) {
							request.setRequestHeader("Authorization","Basic"+localStorage.logintoken);
						},
						success:function(e){
							if(e.code==0){
								localStorage.mobile=$(".bindCont>input").eq(0).val();
								mui.back()
							}else if(code==10002){
								alert("该手机号已被绑定请重新输入手机号")
							}
						}
					});
				}
			})
		})

	</script>

</html>